<template>
  <div id="main">
    <el-popover :width="410" placement="bottom-start" ref="popover">
      <template #reference>
        <button id="gjAn">
          <div>
            <span>
              <p>头像</p>
            </span>
          </div>
          <div>
            <span>
              <p>挂件</p>
            </span>
          </div>
        </button>
      </template>
      <div>
        <div class="pendantDiv-title">
          <div><Icon type="ios-color-wand" size="20" /> 挑选你的头像挂件</div>
          <div @click.prevent="variable.plData.pendant = null" style="color: #515a6e">取消挂件</div>
        </div>
        <ul>
          <li
            v-for="item in 20"
            :key="item"
            @click="((variable.plData.pendant = item), popover.hide())"
            :class="{ 'li-active': variable.plData.pendant == item }"
          >
            <Image :src="`/gj/${item}.png`" width="80px" height="80px" />
          </li>
        </ul>
      </div>

      <!-- <Card id="pendantDiv" class="pendantDiv">
        <template #title>
          <Icon type="ios-color-wand" size="20" />
          挑选你的头像挂件
        </template>
        <template #extra>
          <a href="#" @click.prevent="variable.plData.pendant = null"> 取消挂件 </a>
        </template>

        <ul>
          <li v-for="item in 20" :key="item" @click="variable.plData.pendant = item">
            <Image :src="`/gj/${item}.png`" width="80px" height="80px" />
          </li>
        </ul>
      </Card> -->
    </el-popover>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import variable from '../../../../js/variable';
  const popover = ref();
</script>
<style scoped>
  #main {
    position: relative;
    margin-left: 10px;
  }
  .pendantDiv-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  .pendantDiv-title div {
    font-size: 16px;
    color: #2cd4d4;
  }
  .pendantDiv-title div:hover {
    cursor: pointer;
  }
  #pendantDiv {
    margin-top: 10px;
    width: 420px;
    /* position: absolute; */
    background-color: #fff;
    /* z-index: 9; */
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    height: 300px;
  }
  li {
    list-style: none;
    cursor: pointer;
    padding: 5px;
    border: 3px solid #fff;
    transition: border 0.2s;
  }
  li:hover {
    border: 3px solid #2cd4d4;
  }
  .li-active {
    border: 3px solid #2cd4d4;
  }
  ul::-webkit-scrollbar {
    display: none;
  }

  /* ------------------------按钮---------------------------- */
  #gjAn {
    outline: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 140px;
    height: 30px;
    border-radius: 0.5em;
    box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);
    overflow: hidden;
    cursor: pointer;
  }

  #gjAn div {
    transform: translateY(0px);
    width: 100%;
  }

  #gjAn,
  #gjAn div {
    transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #gjAn div span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0.75em 1.125em;
  }

  #gjAn div:nth-child(1) {
    background-color: #1e90ff;
  }

  #gjAn div:nth-child(2) {
    background-color: #21dc62;
  }

  #gjAn:hover {
    box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);
  }

  #gjAn:hover div {
    transform: translateY(-30px);
  }

  #gjAn p {
    font-size: 17px;
    font-weight: bold;
    color: #ffffff;
  }

  #gjAn:active {
    transform: scale(0.95);
  }
  /* ------------------------按钮end---------------------------- */

  @media (max-width: 800px) {
    #main {
      display: none;
    }
  }
</style>
